<template>
  <van-row>
    <van-nav-bar title="选择训练计划"  style="height: 52px;line-height: 52px" >
      <van-icon name="arrow-left" slot="left" color="#ccc" size="34px"  @click="onClickLeft"/>
    </van-nav-bar>

    <van-tabs color="#ccc" @change="tap">
      <van-tab title="全部" >
        <div class="box" v-for="item in list">
          <div class="item-box">
            <img :src="item.img" alt="">
            <div class="item-tex">
              <p>{{item.name}}</p>
              <p>5次/{{item.num}}训练过/{{item.fl}}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab  v-for="items in name" :title="items" >
        <div class="box" v-for="item in list1">
          <div class="item-box">
          <img :src="item.img" alt="">
          <div class="item-tex">
            <p>{{item.name}}</p>
            <p>5次/{{item.num}}训练过/{{item.fl}}</p>
          </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </van-row>

</template>
<script>
  import axios from 'axios'

  export default {
    name:'videoTraining',
    data(){
      return{
        name:['减肥燃脂','家庭健身','瑜伽系列','女生塑形','男生塑形'],
        list:[],
        list1:[]
      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      tap(index,title){
        let _this=this
        this.list1=[]
        let arr=[]
        this.list.map(function (item) {
          if(title==item.fl){
            console.log(item.fl)
            arr.push(item)
            console.log(arr)
            _this.list1=arr
            console.log(_this.list1);
          }
        })

      }
    },
    mounted() {
      let _this = this
      axios({
        url:'http://www.suxing.com/api',
      }).then(function (res) {
        console.log(res.data.data);
        _this.list=res.data.data
      })
    }

  }
</script>
<style scoped>
  .box{
    padding: 0 10px;
  }
  .item-box{
    height: 125px;position: relative;margin-bottom: 15px;
  }
  .item-tex{
    position: absolute;left: 66px;bottom: 30px;
  }
</style>
